<template>
    <div class="container" id="Container"
         @mouseenter="mousein"
         @mouseleave="mouseout">
      <div class="user-cover" id="UserCover">
        <div class="user-cover-line"></div>
        <div class="username" v-show="open">{{getUser.username}}</div>
      </div>
      <div class="pic-cover">
        <div class="pic" >
          <span class="iconfont icon-account icon" ></span>
        </div>
      </div>

    </div>
</template>

<script>
  import bus from '../assets/js/Eventbus'
    export default {
        name: 'Userview',
        props: [],
        components: {},
        data() {
            return {
              container:null,
              usercover:null,
              timer:null,
              open:false,
              register:false,
              login:{
                username:'',
                password:'',
                passagain:''
              }
            }
        },
        methods: {
          mousein(){
            if(this.$store.state.pagewidth>768) {
              this.container.style.width = '120px';
              this.open=true;
              this.timer=window.setTimeout(()=>{
                if(!this.$store.state.login){
                  this.usercover.style.height='100px';
                }else{
                  this.usercover.style.height='200px';
                }
                this.usercover.style.borderRadius='18px 18px 10px 10px';
              },400)
            }
          },
          mouseout(){
            if(this.$store.state.pagewidth>768) {
              window.clearTimeout(this.timer);
              this.open=false;
              this.container.style.width = '40px';
              this.usercover.style.height='38px';
              this.usercover.style.borderRadius='18px';
              this.register=false;

            }
          },
        },
        created() {

        },
        mounted() {
          this.container=document.getElementById('Container');
          this.usercover=document.getElementById('UserCover');
          if(document.documentElement.clientWidth<768){
            this.open=true;
          }
          bus.$on('changesize',()=>{
            if(this.$store.state.pagewidth<768){
              this.container.style.width = '120px';
              this.open=true;
            }else{
              this.container.style.width = '40px';
              this.open=false;
            }
            this.usercover.style.height='38px';
            this.usercover.style.borderRadius='18px';
          })

        },
        computed: {
          getUser(){
            return this.$store.state.user;
          },
          getlogin(){
            return this.$store.state.login;
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container{
    position: fixed;
    width:40px;
    /*height:60px;*/
    top:-4px;
    z-index: 150;
    right:10px;
    /*left:calc(100% - 50px);*/
    transition: all 0.5s ease;
    /*background: #000;*/
  }
  .pic-cover{
    position: absolute;
    width:40px;
    height:40px;
    top:5px;
    /*left:0px;*/
    right: 0;
    border-radius: 50%;
    background: #76b0fb;
    /*border-left:1px solid #fff;*/
  }
  .pic{
    position:absolute;
    width:38px;
    height:38px;
    top:1px;
    left:1px;
    border-radius: 50%;
    background: #fff;
  }
  .user-cover{
    position: absolute;
    width:100%;
    top:5px;
    height:38px;

    border-radius: 18px;
    /*background: #76b0fb;*/
    transition: all 0.5s ease;
    overflow: hidden;
  }
  .user-cover-line{
    position: absolute;
    width:calc(100% - 6px);
    height:32px;
    top:2px;
    left:2px;
    border-radius: 16px;
    border:1px solid #76b0fb;
  }
  .icon{
    font-size:20px;
    line-height:35px;
    color: #76b0fb;
  }
  .username{
    position: absolute;
    /*right:10px;*/
    left:10px;
    width:calc(100% - 50px);
    text-align: center;
    top:10px;
    font-size: 15px;

    cursor:default;
  }


  @media(min-width:768px){
    .container{
      left:75%;
    }
    .pic-cover{
      left:0px;
      right:auto;

    }
    .username{
      right: 10px;
      left:auto;
      color:#76b0fb;
    }
  }
  @media(max-width: 768px){
    .container{
      top:8%;
      width:120px;
    }
    .username{
      color: white;
    }
    .user-cover{
      background: rgba(114, 209, 251, 0.51);
    }
    .user-cover-line{
      background: rgba(114, 209, 251, 0.8);
      border:1px solid white;
    }
  }
</style>
